<!-- Content Header (Page header) -->
<section class="content-header">
	<h1>MySQL配置管理</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i>MySQL管理</a></li>
		<li><a href="#"><i class="fa fa-table"></i>Procedure</a></li>
		<li class="active">新增ProcedureMySQL</li>
	</ol>
</section>
<!-- Main content -->
<section id="container" class="content">
	<div class="row">
		<div class="col-md-12">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">MySQL-REP配置管理</h3>
					<div class="box-tools pull-right">
						<button id="abc" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>

				<form action="" id="add_form">
					<div class="box-body">
						<div class="row">
							<div class="col-xs-6">
								<div class="form-group">
									<input type=hidden id="guid" name="guid" /> <label for="name">名称:</label>
									<input id="name" type="text" name="name"
										class="form-control" validateType="lengthRange-1-20|excludeCN"
										placeholder="MySQL-REP名称(必须问英文哦)">
								</div>
								<div class="form-group">
								    <label for="repType">主从类型:</label>
									<input id="repType" type="text" name="repType"
										class="form-control" validateType="lengthRange-1-20|excludeCN"
										placeholder="">
								</div>
								<div class="form-group">
									<label for="zone">地区:</label> <input id="zone" type="text"
										name="zone" class="form-control" placeholder=""
										validateType="lengthRange-1-100">
								</div>
								<div class="form-group">
									<label >添加数据库实例</label>
										<select id="mysqlServer"
										 class="selectpicker bla bla bli form-control"  data-live-search="true" >
										</select>
								</div>
								<div class="form-group">
									<button class="btn btn-primary" id="addWrite"
										onclick="return false;">增加writeHost</button>
									<button class="btn btn-success" id="addRead"
										onclick="return false;">增加readHost</button>
									<button class="btn btn-info" id="editHost"
										onclick="return false;">编辑名称</button>
									<button class="btn btn-danger" id="removeHost"
										onclick="return false;">删除节点</button>
									<ul id="dataHostTree" class="ztree"></ul>
								</div>
							</div>
						</div>
					</div>
				</form>


				<div class="box-footer">
					<div class="form-group">
						<button class="btn btn-primary"
							onclick="addForm('mySqlRepService','addMyRep','add_form','addForm_extra_call')">保存</button>
						<button class="btn btn-primary"
							onclick="loadContext('page/manger/myrep.html')">返回列表</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- /.content -->
<script type="text/javascript">
	$.AdminLTE.boxWidget.activate();
	function addForm_extra_call(_formid, data) {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree");
		var nodes = zTree.getNodes();
		var value_obj = {};
		value_obj.guid = data.guid;
		value_obj.name= data.name;
		value_obj.zone = data.zone;
		value_obj.repType = data.repType;
		data.value = JSON.stringify(value_obj);
		data.ztree = JSON.stringify(nodes);

		$.fn.zTree.init($("#dataHostTree"), setting, zNodes);
	}

	$(document).ready(function() {
		ready4AddForm("ready4Update_extra_call");
		$("#guid").val("");
	});
</script>
<script type="text/javascript">
	var setting = {
		view : {
			selectedMulti : false
		},
		edit : {
			enable : true,
			showRemoveBtn : false,
			showRenameBtn : false
		},
		data : {
			keep : {
				parent : true,
				leaf : true
			},
			simpleData : {
				enable : true
			}
		}
	};

	var zNodes = [];
	var newCount = 1;
	function add(e) {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree"), isParent = e.data.isParent, nodes = zTree
				.getSelectedNodes(), treeNode = nodes[0];
		var addNode=$("#mysqlServer").val();		
		if (!isParent) {
			if (treeNode == undefined || (!treeNode.isParent)) {
				alert("请选择相应WriteHost节点");
				return;
			}
			treeNode = zTree.addNodes(treeNode, {
				id : (100 + newCount),
				pId : treeNode.id,
				isParent : isParent,
				name : addNode
			});
		} else {
			treeNode = zTree.addNodes(null, {
				id : (100 + newCount),
				pId : 0,
				isParent : isParent,
				name : addNode
			});
		}
		zTree.editName(treeNode[0]);
	};
	function edit() {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree"), nodes = zTree
				.getSelectedNodes(), treeNode = nodes[0];
		if (nodes.length == 0) {
			alert("请先选择一个节点");
			return;
		}
		zTree.editName(treeNode);
	};
	function remove(e) {
		var zTree = $.fn.zTree.getZTreeObj("dataHostTree"), nodes = zTree
				.getSelectedNodes(), treeNode = nodes[0];
		if (nodes.length == 0) {
			alert("请先选择一个节点");
			return;
		}
		var callbackFlag = $("#callbackTrigger").attr("checked");
		zTree.removeNode(treeNode, callbackFlag);
	};
	$(document).ready(function() {
		$.fn.zTree.init($("#dataHostTree"), setting, zNodes);
		$("#addWrite").bind("click", {
			isParent : true
		}, add);
		$("#addRead").bind("click", {
			isParent : false
		}, add);
		$("#editHost").bind("click", edit);
		$("#removeHost").bind("click", remove);
		$.ajax({
			url:"./dispatcherAction/execute.do?service=mySqlRepService&method=queryAll",
			type: 'POST',
			dataType: "json",
			success: function(data){
				var s=data.attr.list;
				if(s==undefined)
					return; 
				  for(i=0;i<s.length;i++){
					$("#mysqlServer").append(
					"<option value='"+ s[i]+"'>"+ s[i]+ "</option>");
				} 
				$("#mysqlServer").selectpicker({noneSelectedText:'请选择'}); 
			}
		});
	});
</script>